<template>
  <div class="dialog">
      <el-dialog v-model="show" 
      :title="title" :width="width" @closed="close">
          <!-- header 头部 -->
          <slot name="header"></slot>
          <!-- content 内容区 -->
          <el-scrollbar max-height="400px" class="content">
              <slot name="content"></slot>
          </el-scrollbar>
          <!-- footer区域 -->
          <template #footer>
              <span class="dialog-footer">
                  <!-- <el-button @click="show = false">取消</el-button> -->
                  <!-- <el-button type="primary" @click="confirm">
                      确定
                  </el-button> -->
                  <slot name="footer"></slot>
              </span>
          </template>
      </el-dialog>
  </div>
</template>
<script setup lang='ts'>
import { useDialogStore } from '../../store/dialog';
import { toRefs } from 'vue';
const emit = defineEmits(['confirm'])
const props = withDefaults(defineProps<{
  width?: string,
}>(), {
  width: '85%',
})
const dialogStore = useDialogStore()

const { type, show, title } = toRefs(dialogStore)

// 关闭
const close = () => {
  type.value = ''
  title.value = ''
}

// 确定
const confirm = () => {
emit('confirm')
show.value = false
}
</script>


<style lang='less' scoped>

</style>